<template>
  <div>
    <el-container>
      <el-header class="px-0" style="height: 56px">
        <myNav :menus="menus" :active-menus="active1thMenu" v-on:click1thMenu="click1thMenu($event)"/>
      </el-header>
      <el-container class="m-0">
        <el-aside :width="asideWidth">
          <sideNav :menus="menus2th"/>
        </el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from 'axios'

import myNav from '../components/home/myNav'
import sideNav from '../components/home/sideNav'

export default {
  name: 'Home',
  data () {
    return {
      menus: [],
      menus2th: [],
      active1thMenu: '1',
      asideWidth: '200px'
    }
  },
  components: {
    myNav,
    sideNav
  },
  created () {
    axios.get('/api/menus.json').then(res => {
      this.menus = res.data.menus
    })
  },
  methods: {
    click1thMenu (id) {
      this.menus2th = []
      this.active1thMenu = id
      for (let i = 0; i < this.menus.length; i++) {
        if (this.menus[i].id === id) {
          if (this.menus[i].child !== undefined) {
            this.asideWidth = '200px'
            setTimeout(() => {
              this.menus2th = this.menus[i].child
            }, 10)
          } else {
            this.asideWidth = '0'
          }
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
